<script setup>
import useNightModeStore from "@/stores/nightModeStore";

import {defineProps,defineEmits} from "vue";
const props=defineProps({
    list:Array
});
const nightModeStore=useNightModeStore();
const emits=defineEmits(["showReply"])
const coverTime=(time)=>{
    const datetime=new Date(time*1000);
    let year=datetime.getFullYear();
    let month=datetime.getMonth();
    month=month<10?"0"+month:month;
    let date=datetime.getDate();
    date= date<10?"0"+date:date;
    let hours=datetime.getHours();
    hours=hours<10?"0"+hours:hours;
    let minutes=datetime.getMinutes();
    minutes=minutes>9?+minutes:"0"+minutes;
    return `${month}-${date} ${hours}:${minutes}`
}
const likeme=(commentid,event)=>{
    console.log("点击事件对象",event);
    console.log("点击的元素对象",event.target);
    if(event.target.tagName!="I") return;
    let isLike=true;
    if(event.target.className=="like"){
        event.target.className="nolike"
        isLike=true;
    }else{
        isLike=false;
        event.target.className="like"
    }

    props.list.map(item=>{
        if(commentid==item.id){
            if(isLike)item.likes--;
            else item.likes++;
        }
    })
}
const clickReply=()=>{
    //触发自定义事件
    emits("showReply",{a:100,money:100});
}
// 另一种方法
// const coverTime=(t)=>{
//     // console.log("t==>",t)
//     const d=new Date(t);
//     return (d.getMonth()+1)+"-"+d.getDate()+" "+d.getHours()+":"+d.getMinutes();
// }
</script>

<!-- 时间戳：自1970-1-1 0:0:0到现在的秒数
      js里需要毫秒数  1s=1000ms -->
<template>
   
    <ul :class="['comment-list',nightModeStore.isNight?'night':'']">
        <li v-for="comment in list" :key="comment.id">
            <img class="avatar" :src="comment.avatar"/>
          
            <div class="comment">
                <!-- 名字 -->
               
                <div class="nickname">
                  <span>  {{comment.author}}</span>
                  <div class="dot"><i></i><i></i><i></i></div>
                </div>
                <!--评论内容 -->
                <div class="content"> {{ comment.content}}</div>
                <!-- 日期 -->
                <div class="dateline">
                    <span class="datetime">{{coverTime(comment.time)}}</span>
                    <div class="upmore">
                        <i class="nolike" @click="likeme(comment.id,$event)">
                            <span>{{ comment.likes }}</span>
                        </i>  <!--点赞-->
                        <i @click="clickReply" class="reply"> </i>  <!--回复-->
                    </div>
                </div>          
            </div>
            </li>
    </ul>

</template>
<style scoped>
.comment-list.night{
    background-color: #555;
    color: white;
}
.comment-list li{
    display: flex;
    padding: 10px 10px 5px 10px;
    border-bottom: 1px solid #ddddddec;
}
.avatar{
    width: 30px;
    height: 30px;
    border-radius: 50%;
}
.comment{
    margin-left: 20px;
    width: 100%;
}
.nickname{
    display: flex;
    justify-content: space-between;
  
}
.nickname span{
    font-size: 13px;
}
.nickname .dot{
    display: flex;
    align-items: center;
    
}
.nickname .dot i{
    width: 3px;
    height:3px;
   background-color: #bbb;
    margin-right: 5px;
    border-radius: 50%;
}
.content{
    font-size: 14px;
    padding:8px 20px 5px 0px;
    
}
.dateline{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.datetime{

    font-size: 13px;
    color: #bbb;
}
.upmore i{
    display: flex;
    width: 30px;
    height: 30px;
    background: url(../assets/dianzan.png)no-repeat center center;
    background-size: 20px 20px;
}
.upmore{
    display: flex;

}
.upmore i.nolike{
    background-image: url(../assets/dianzan.png);
    position: relative;
    font-style: normal;
}
.upmore i.like{
    background-image: url(../assets/dianzan2.png);
    position: relative;
    font-style: normal;
}
.upmore i.like span,.upmore i.nolike span{
    position: absolute;
    font-size: 12px;
    color: #999;
    left: -10px;
    top:7px;
}
.upmore i.like span{
    color: #f00;
}
.upmore i.reply{
    background-image: url(../assets/pinglun-pinglun-biankuang.png);
    background-size: 20px 20px;
   
}

</style>